<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <div style="line-height: 50px; border-bottom: 1px solid #cccccc;">
            <span>
                <router-link to="/">
                one
            </router-link>
            </span>
            |
            <span>
                <router-link to="/hitwo">two</router-link>
            </span>
        </div>
        <div style="min-height: 500px; padding: 20px; background-color: bisque ;">
            <router-view></router-view>
        </div>
        <div style="min-height: 200px;">
            底部
        </div>
    </div>
    <template id="no1">
        <div>
            111 222
            <hr>
            <div>
                <span>
                    <router-link to="/">身高</router-link>
                </span>
                |
                <span>
                    <router-link to="/ht_no2">爱好</router-link>
                </span>
            </div>
            <div>
                <router-view></router-view>
            </div>
        </div>
    </template>
    <template id="no2">
        <div>
           222  333
           <hr>
           <div>
            <span>
                <a href="#/hitwo">身高</a>
                
            </span>
            |
            <span>
                <a href="#/hitwo/th_no2">
                    爱好
                </a>
            </span>
        </div>
        <div>
            <router-view></router-view>
        </div>
        </div>
    </template>
    <template id="ht_no1">
        <div>
            123456mm
        </div>
    </template>
    <template id="ht_no2">
        <div>
            cm123456
        </div>
    </template>
    <template id="th_no1">
        <div>
            迪迦奥特曼
        </div>
    </template>
    <template id="th_no2">
        <div>
        盖亚
        </div>
    </template>
</body>
</html>
<script src="../vue.js"></script>
<script src="./vue-router.js"></script>
<script>
    // 1.定义路由组件
    let no1 = {
        template:'#no1'
    }
    let no2 = {
        template:'#no2'
    }
    // 2.定义路由组件
    let routes = [
        {path:'/',name:'hyp',component:no1,children:[
            {path:'/',name:'ht_no1',component:{template:'#ht_no1'}},
            {path:'/ht_no2',name:'ht_no2',component:{template:'#ht_no2'}},
            
        ]},
        {path:'/hitwo',name:'hitwo',component:no2,
        children:[
            {path:'/',name:'ht_no1',component:{template:'#th_no1'}},
            {path:'th_no2',name:'th_no2',component:{template:'#th_no2'}},
        ]}

    ]
    // 3.创建router实例，然后传`routes`配置
    let router = new VueRouter({
        routes,
    })
    // 4.创建和挂载根实例
    new Vue({
        el:"#box",
        router
    })
</script>